<template>
	<view class="content">
		<view class="list" v-for="(item, index) in list" :key="index" @click="toInfo(item,index)" >
			<view class="imgCard">
				<image :src="item.posterUrl" class="usuing" mode="widthFix"></image>
				<i class="iconfont bofangIcon">&#xea6e;</i>
				<view class="see">
					<i class="iconfont" style="font-size: 28rpx;margin-right: 10rpx;">&#xec7f;</i>
					<span>{{ item.likeCount }}</span>
				</view>
			</view>
			<view class="title">
				<span style="margin-right: 15rpx;font-weight: bold;color: #000;">#{{ item.categoryName }}</span>
				{{ item.title ? item.title : '暂无标题' }}
			</view>
			<view class="user">
				<image :src="item.userRsp.avatar" class="listimg" mode=""></image>
				<span>{{ item.userRsp.username }}</span>
			</view>
		</view>
		<nodata v-if="list.length == 0"></nodata>
		<!-- <view class="noData" v-if="list.length == 0" style="top:60%">
			<image src="../../static/images/noData.png" mode=""></image>
			<text>暂无数据</text>
		</view> -->
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			list: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		data() {
			return {
				ceshi: {}
			};
		},
		methods: {

			toInfo(item,index) {
				// let arr = this.list.concat()
				// for (var i = 0; i < arr.length; i++) {
				// 	if (i == index) {
				// 		this.ceshi = arr[i] //声明一个对象保存符合要求的数据
				// 		arr.splice(i, 1) //先把符合条件的数据从当前数组中删除
				// 		break;
				// 	}
				// }
				// arr.unshift(this.ceshi) //通过unshift函数把符合要求的数据放到第一位
				// let data = JSON.stringify(arr)
				console.log('toInfo',item,index)
				let data = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: `/pages/news/details?data=${data}&id=${item.docId}`
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		column-count: 7; /* 设置列数 */
		  column-gap: 10px; /* 设置列间距 */
	}

	.list {
		margin-bottom: 40rpx;
		break-inside: avoid-column; 

		.title {
			font-size: 30rpx;
			margin: 10rpx 0;
		}

		.user {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #7a7a7a;
			margin-top: 20rpx;

			.listimg {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
			}
		}

		.imgCard {
			border-radius: 10rpx;
			overflow: hidden;
			position: relative;
			cursor: pointer;
			image{
				width: 98%;
				height: auto;
			}

			.usuing {
				border-radius: 10rpx;
			}
			
			.bofangIcon{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				font-size: 94rpx;
				color: #fff;
				opacity: .6;
			}

			.see {
				position: absolute;
				z-index: 9;
				bottom: 20rpx;
				left: 20rpx;
				color: #fff;
				display: flex;
				align-items: center;
				background-color: rgba(148, 153, 153, 0.49);
				padding: 6rpx 14rpx;
				border-radius: 30rpx;
				font-size: 24rpx;
				
				// image {
				// 	width: 30rpx;
				// 	height: 30rpx;
				// 	margin-right: 5rpx;
				// }
			}
		}
		.imgCard:hover{
			image{
				transform:scale(1.1);
				transition:all 1s;
			}
		}
	}

	.content {
		padding: 10px;

		.cnt {
			padding: 10px;

			.title {
				font-size: 16px;
			}

			.text {
				font-size: 14px;
				margin-top: 5px;
			}
		}
	}
</style>